第四章：數值與單位（1）

第 11 屆 iThome 鐵人賽

DAY 12

Modern Web

CSS大全閱讀筆記系列第 12 篇

11th鐵人賽

Camellus

2019-09-28 23:54:28

633 瀏覽

分享至

關鍵字、字串與其他文字數值：
a. 關鍵字：
- 關鍵字是描述某個數值的詞彙，例如none、underline⋯⋯等。
- 在能接受關鍵字的屬性中，關鍵字的定義只限於屬性之內。
- 同樣的關鍵字在不同屬性中，代表的意義不一定相同，如normal在leter-spacing和font-style中的意義就完全不同。
b. 全域關鍵字：
- 全域關鍵字是所有屬性都能使用的關鍵字。
- inherit：不管屬性是否會繼承，元素都將強制繼承親代元素的屬性值，可以取消掉預設的屬性。
- initial：把屬性值設為預設的初始值，等同於重設數值，如font-weight: initial;，就會套用預設值normal，因此和font-weight: normal;會得到相同的結果。
- unset：同時擁有inherit和initial的效果，當屬性可繼承時，unset等同於inherit，若是屬性不可繼承，則會和initial相同。
- all: ingerit | initial | unset ;：all是屬性，初始值則要依照個別屬性而定，可以設定的關鍵字有ingerit、initial、unset三個，會從親代元素繼承除了direction和unicode-bidi以外的所有值，包括元素本身的使用者代理設定（瀏覽器設定），例如<section>裡一個元素設定all: inherit;，這個元素不僅會繼承所有宣告的屬性，還會繼承<section>本身就有的CSS屬性樣式，因此腎ㄓㄩㄥ。
- 在使用全域關鍵字時，注意支援度（尤其是IE）。
c. 字串：
- 字串是指用任何單引號（'）或是雙引號（"）括起來的任意字元序列，數值定義表示為<string>。
- 字串開始與結束必須用相同的引號，且不可使用成西式左右雙引號（“......”）或是西式左右單引號（‘......’），只有單引號（'......'）和雙引號（"......"）才是合法的字串分隔子。
- 字串中可以包含引號，只要與括住字串的引號不同即可，也可以使用跳脫字元半形反斜線（\）。
- 如果字串需要換行，可以在換行前加入跳脫字元，字串會自動換行，而當字串中必須包含換行字元時，則須在換行字元的位置加入\A，且必須緊鄰後續文字（不用留下空白），例如"This is \Aan apple."。
d. URL：
- 絕對URL：代表網頁空間上的絕對位置，把網址放在任一文件，都是有效網址，例如url(https://ithelp.ithome.com.tw)。
- 相對URL：以相對於使用URL文件的位置來表示資源位置，如果在同一資料夾，或同一資料夾下的子資料夾，就寫成url(subfolder/test.jpg)，如果需到文件所在地的上一層資料夾再選擇檔案，則寫成url(../folder/subfolder/test.jpg)，用../到上一層資料夾，在寫出目標檔案位置。在CSS中，也有相對URL，但是用在@import第二份樣式表上，URL的起始基準就是第一份樣式表。
- URL與左括弧間不能有空白字元（不能寫成url (......)），正確寫法為url(......)，否則視為無效宣告忽略。
e. 影像：
- 語法上用<image>表示，可分為<url>、<image-set>和<gradient>三種。
- <url>：外部資源的URL識別子，連結影像檔的URL。
- <image-set>：為一組影像，根據條件嵌入相對應的對象，可以讓桌機版和手機版套入不同大小的影像圖片，但支援度有限。
- <gradient>：又分為線性漸層（linear gradient）和放射狀漸層（radial gradient）兩種，且可以套入一個以上的漸層。
f. 識別子：
- 使用者對某些東西定義的識別子，語法值中以<identifier>表示。
- 有些屬性能使用識別子數值，最常見的就是列表計數器。
- 識別子本身有大小寫之分。
- 不要用到屬性的保留關鍵字。